<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #keyboardTest {
            width: 300px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--
        我们之前在JavaScript的课程中接触过onkeydown和onokeyup，这两个是键盘的事件监听，在vue中有对应的事件修饰符
        常用的keyCode别名
        keyCode值	别名	        键盘按键
        13	        .enter	    回车
        32	        .space	    空格
        37	        .left	    键盘左键
        38	        .up	        键盘上键
        39	        .right	    键盘右键
        40	        .down	    键盘下键
        9	        .tab	    键盘tab
        46或者8	    .delete	    delete或者backspace
        -->
        <p >{{a}}</p>
        <!-- 按"键盘上键" -->
        <!--
        基本使用方法
        <input type="text" @keyup.up='add'>
        .space是vue封装的对keyCode别名，和下面的代码表示内容相同
        <input type="text" @keyup.38='add'>
        -->
        <input type="text" @keyup.up='add' @keyup.down='minus'
               placeholder="光标放置输入框内，然后按键盘向上/向下方向键" id="keyboardTest">
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el:"#app",
            data:{
                a: 100
            },
            methods:{
                add(event) {
                    console.log(event)
                    this.a ++
                    console.log(this.a)
                },
                minus(event) {
                    console.log(event)
                    this.a --
                    console.log(this.a)
                }
            }
        })
    </script>
</body>
</html>